<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		*{margin: 0;padding: 0;}
		html,body{height: 100%;
			width: 100%;
			display: flex;
			background: gray;
			perspective: 800px;
			overflow: hidden;
		}
		.box{width:133px;
			height: 200px;
			border:1px solid white;
			background: rgba(89,205,138,0.8);
			margin:auto;
			position: relative;
			transform-style: preserve-3d;
			transform:rotateX(-20deg);
		}
		.box img{
			width: 100%;
			height: 100%;
			position: absolute;
			-webkit-box-reflect: below -50%  -webkit-linear-gradient(
             top,
             rgba(0,0,0,0.8) 0%,
             rgba(0,0,0,0.6) 60%,
             rgba(0,0,0,0) 100%
			);
			}
		.box>p{
			width: 800px;
			height: 800px;
			position: absolute;
			background: rgba(100,100,100,0.8);
			left: calc(133px/2 - 800px/2);
			top: calc(200px/2 - 800px/2);
			border-radius: 50%;
			transform:rotateX(90deg) translateZ(-100px);
		}
		.box .Text{position: absolute;width: 100%;height: 100%;}
		.box .Text h2,.box .Text h3,.box .Text h4{ 
			text-align: center;
			line-height: 50px;
			color: white;
			animation: Color 4s infinite; 

		}
		
		@keyframes Color{
			0%{color:white;}
			20%{color: red;}
			40%{color: green;}
			60%{color: blue;}
			80%{color: yellow;}
			100%{color: white;}
		}
		
	</style>
</head>
<body>
	<div class="box">
		<div class="Text">
		<h2>3D</h2>
		<h3>web03.cn</h3>
		<h4>【03】</h4>
		</div>
		<img src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/3.jpg">
		<img src="img/4.jpg">
		<img src="img/5.jpg">
		<img src="img/6.jpg">
		<img src="img/7.jpg">
		<img src="img/8.jpg">
		<img src="img/9.jpg">
		<img src="img/10.jpg">
		<p></p>
	</div>
</body>
<script>
window.onload=function(){
	var obox=document.getElementsByClassName('box')[0];
	var oimg=obox.getElementsByTagName('img');
  for(var i=0;i<oimg.length;i++){
  	oimg[i].style.transform="rotateY("+(i*360/oimg.length)+"deg) translateZ(300px)";
  	oimg[i].style.transition='transform 1s '+(oimg.length-i)*0.1+'s';
  }

  var lastx=0,
  		lasty=0,
  		nowx=0,
  		nowy=0
  		desx=0,
  		desy=0,
  		rotx=-20,
  		roty=0,
  		timer=null;
 document.onmousedown=function(e){
  		var e=e||event;
 		lastx=e.clientX;
 		lasty=e.clientY;
 	this.onmousemove=function(e){
 		var e=e||event;
 		nowx=e.clientX;
 		nowy=e.clientY;
 		desx=nowx-lastx;
 		desy=nowy-lasty;

 		rotx-=desy*0.05;
 		roty+=desx*0.1;
 		obox.style.transform="rotateX("+rotx+"deg) rotateY("+roty+"deg)";

 		lastx=nowx;
 		lasty=nowy;

 	}
 	this.onmouseup=function(){//鼠标抬起，取消事件
 		this.onmousemove =this.onmouseup=null;
 		timer=setInterval(function(){
 			desx*=0.97;
 			desy*=0.97;

 			rotx-=desy*0.05;
 			roty+=desx*0.1;
	 		obox.style.transform="rotateX("+rotx+"deg) rotateY("+roty+"deg)";
 			if (Math.abs(rotx)<0.5 && Math.abs(roty)<0.5) {
 				clearInterval(timer);
 			}

 		},15)
 	}
 	return false;
 }
}
</script>
</html>